<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>成绩查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,
			minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			* {
				box-sizing: border-box;
			}
			
			html,
			body {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			#container {
				width: 980px;
				margin: 0 auto;
				background-color: white;
			}
			
			#container #title {
				width: 100%;
				height: 6vh;
				text-align: center;
				line-height: 6vh;
				font-size: 18px;
				color: red;
				box-shadow: 0 5px 5px #F2F2F2;
			}
			
			#title img {
				width: 12px;
				margin-left: 2%;
				float: left;
				margin-top: 0.5rem;
			}
			
			#choice {
				width: 98%;
				margin: 1rem auto;
			}
			
			#first {
				width: 100%;
				height: 8vh;
				border: 1px solid #F2F2F2;
				line-height: 8vh;
			}
			
			#first img {
				width: 16px;
				margin-left: 1%;
			}
			
			#first input {
				width: 95%;
				height: 6vh;
				border: none;
				outline: none;
				margin-left: 1%;
			}
			
			.second {
				width: 100%;
				height: 8vh;
				border: 1px solid #F2F2F2;
				line-height: 8vh;
			}
			
			.second img {
				width: 16px;
				margin-left: 1%;
			}
			
			.second input {
				width: 78%;
				height: 6vh;
				border: none;
				outline: none;
				margin-left: 1%;
			}
			
			.second span img {
				width: 10px !important;
				position: absolute;
				top: 19%;
			}
			
			button {
				width: 80%;
				height: 8vh;
				border: 1px solid #D01F3C;
				background: #D01F3C;
				color: white;
				font-size: 18px;
				line-height: 6vh;
				border-radius: 50px;
				display: block;
				margin: 8vh auto;
				box-shadow: 0 5px 12px #F0F0F0;
				outline: none;
			}
			
			@media screen and (max-width: 480px) {
				#container {
					width: 100%;
				}
				#first input {
					width: 80%;
				}
				.second input {
					width: 52.8%;
				}
				#seconds input{
					width: 65% !important;
				}
				a{
					text-decoration: none;
				}
			}
		</style>
	</head>

	<body>
		<div id="grade">
			<div id="container">
				<div id="title">

					<img src="ios/nav_btn_back_nor.png@2x.png" />
					<span>成绩查询</span>
				</div>
				<div id="choice">
					<div id="first">
						<img src="ios/iocn_user_dis.png@2x.png" />
						<input type="text" placeholder="请输入姓名" />
					</div>
					<div class="second">
						<img src="ios/iocn_banji_dis.png@2x.png" />
						<input type="text" placeholder="请选择分馆" />
						<span>海沧天虹旗舰馆 <img src="ios/list_btn_link_nor.png@2x.png"/></span>
					</div>
					<div id="seconds" class="second " >
						<img src="ios/iocn_user_dis.png@2x.png" />
						<input type="text" placeholder="请选择班级" style="width: 83%;" />
						<span>跆拳道班 <img src="ios/list_btn_link_nor.png@2x.png"/ style="top: 27%;"></span>
					</div>
					<div class="second" id="seconds">
						<img src="ios/icon_youxiang_nor.png@2x.png" />
						<input type="text" placeholder="请输入验证码" style="width: 83%;" />
						<img src="ios/验证码.png" / style="position: absolute; top: 33%;width: 85px;">
					</div>
					<div>
						<a href="登录.html"><button>查询</button></a>
					</div>

				</div>
			</div>
		</div>
	</body>

</html>